# Fastpack **Repository Path**: mirrors/Fastpack ## Basic Information - **Project Name**: Fastpack - **Description**: Fastpack 是一个 JavaScript 应用打包器，目标是做到对于中型应用（约1000个模块）的打包时间小于1000ms，增量重新打包时间低于100ms - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: https://www.oschina.net/p/fastpack - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2018-07-19 - **Last Updated**: 2026-02-28 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Fastpack [![Build Status](https://dev.azure.com/fastpack/fastpack/_apis/build/status/fastpack.fastpack)](https://dev.azure.com/fastpack/fastpack/_build/latest?definitionId=1) [![Backers on Open Collective](https://opencollective.com/fastpack/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/fastpack/sponsors/badge.svg)](#sponsors) Pack JS code into a single bundle fast & easy. ## Why? Because JavaScript builds should be faster! Here is an example benchmark of bundling ~1600 modules together. | | Fastpack| Parcel| Webpack |----|:--:|:--:|:--: | initial build| **0.730s**| 9.740s| 3.625s | persistent cache| **0.171s**| 1.218s| N/A | watch mode| **0.084s**| 0.503s| 0.473s ## Getting Started Let's try building a simple React application! ```Bash $ mkdir react-app $ cd react-app $ yarn init -y $ yarn add react react-dom $ yarn add --dev fastpack $ yarn add --dev babel-loader babel-preset-react-app style-loader css-loader url-loader ``` **src/index.js** ```JavaScript import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; ReactDOM.render(, document.getElementById('root')); ``` **src/index.css** ```CSS body { margin: 0; padding: 0; font-family: sans-serif; } ``` **src/App.js** ```JavaScript import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return (
logo

Welcome to React

To get started, edit src/App.js and save to reload.

); } } export default App; ``` **src/App.css** ```CSS .App { text-align: center; } .App-logo { animation: App-logo-spin infinite 20s linear; height: 80px; } .App-header { background-color: #222; height: 150px; padding: 20px; color: white; } .App-title { font-size: 1.5em; } .App-intro { font-size: large; } @keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } ``` **index.html** ```HTML React App
``` Also, add the `src/logo.svg` of your choice. Now let's add some config: **.babelrc** ```JavaScript { "presets": ["react-app"] } ``` And the fastpack configuration as well: **fastpack.json** ```JavaScript { "entryPoints": ["src/index.js"], "preprocess": [ { "re": "^src.+\\.js$", "process": "babel-loader" }, { "re": "\\.svg$", "process": "url-loader" }, { "re": "\\.css$", "process": "style-loader!css-loader" } ] } ``` *The above configuration can be alternatively specified using command-line arguments, for more details run:* ```Bash $ node_modules/.bin/fpack --help ``` We are good to go! Now run: ```Bash $ node_modules/.bin/fpack build --dev Cache: empty Done in 0.817s. Bundle: 942Kb. Modules: 30. $ open index.html ``` Voila! Now try running it again and see the power of the persistent cache! ```Bash $ node_modules/.bin/fpack build --dev Cache: used Done in 0.032s. Bundle: 942Kb. Modules: 30. ``` For more configuration options and usage scenarios see [Documentation](https://fastpack.sh/docs/get-started.html). Have a question or want to contribute? Join us on [Discord](https://discord.gg/4HVCjDh)! ## Contributors This project exists thanks to all the people who contribute. Special thanks to [@camsong](https://github.com/camsong) for providing the [fastpack](https://www.npmjs.com/package/fastpack) name on [npmjs.com](npmjs.com)! ## Backers Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/fastpack#backer)] ## Sponsors Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/fastpack#sponsor)]